<template>
  <el-dialog
      :title="id?'修改字典信息':'新增字典信息'"
      :visible.sync='show'
      width='30%'
      @open="handlerOpen"
      :before-close='handleBeforeClose'
      @close="handleBeforeClose">
    <el-form
        :model='departmentForm'
        ref='departmentForm'
        :rules='departmentFormRules'
        label-width='130px'
        size='medium'>
      <el-form-item label="所属系统" prop="systemId">
        <el-select
            v-model="departmentForm.systemId"
            placeholder='所属系统'
            clearable
            filterable
            @change="handlerSelectTypeList">
          <el-option
              v-for='(item, index) in systemList'
              :key='index'
              :label='item.name'
              :value='item.id'>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='字典类型' prop='type'>
        <el-select
            v-model="departmentForm.type"
            placeholder='字典类型'
            clearable
            allow-create
            filterable>
          <el-option
              v-for='(item, index) in typeList'
              :key='index'
              :label='item'
              :value='item'>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='字典名称' prop='label'>
        <el-input v-model="departmentForm.label" placeholder="字典名称"/>
      </el-form-item>
      <el-form-item label='字典值' prop='value'>
        <el-input v-model="departmentForm.value" placeholder="字典值"/>
      </el-form-item>
      <el-form-item label='排序号' prop='orderNo'>
        <el-input-number v-model="departmentForm.orderNo" controls-position="right" :min="1" :max="20"/>
      </el-form-item>
      <el-form-item label='备注' prop='remark'>
        <el-input type="textarea" v-model="departmentForm.remark"/>
      </el-form-item>
    </el-form>
    <div class='footer'>
      <el-button size='medium' type='primary' @click='handleBeforeClose'>取消</el-button>
      <el-button size='medium' type='success' @click='handlerSubmitForm'>保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DepartmentApi from '@/apis/system/DepartmentApi'
import { statusEnum } from '@/enums/CommonEnum'

export default {
  name: 'DepartmentDialog',
  props: {
    show: {
      type: Boolean,
      require: false,
      default: false
    },
    id: {
      type: Number,
      required: false
    },
  },
  data () {
    return {
      statusEnum: statusEnum,
      systemList: [],
      typeList: [],
      departmentForm: {
        id: null,
        systemId: null,
        type: null,
        label: null,
        value: null,
        orderNo: null,
        remark: null,
      },
      departmentFormRules: {
        type: { required: true, message: '字典类型不能为空', trigger: 'blur' },
        label: { required: true, message: '字典名称不能为空', trigger: 'blur' },
        value: { required: true, message: '字典值不能为空', trigger: 'blur' },
      }
    }
  },
  computed: {
    size () {
      return this.$store.getters['ElementUI/getSize']
    },
  },
  mounted () {
  },
  watch: {
    id (newVal) {
      if (newVal) {
        this.handlerSelectById(this.id)
      }
    },
  },
  methods: {
    async handlerSelectTypeList () {
      const res = await DepartmentApi.selectTypeList({ systemId: this.departmentForm.systemId })
      this.typeList = res.data
    },

    async handlerSelectById (id) {
      const res = await DepartmentApi.selectById(id)
      if (res.code === '0') {
        this.departmentForm = res.data
      } else {
        this.$message.error(res.messsage)
      }
    },
    handlerOpen () {
      this.handlerSelectTypeList()
    },
    handleBeforeClose () {
      this.departmentForm = this.$options.data().departmentForm
      this.$emit('close')
    },
    handlerSubmitForm () {
      this.$refs.departmentForm.validate((valid) => {
        if (!valid) {
          setTimeout(() => {
            const isError = document.getElementsByClassName('is-error')
            isError[0].querySelector('input').focus()
          }, 100)
          return false
        }

        if (this.id) {
          this.handlerUpdate()
        } else {
          this.handlerCreate()
        }
      })
    },
    async handlerCreate () {
      const res = await DepartmentApi.create(this.departmentForm)
      if (res.code === '0') {
        this.$emit('close')
      } else {
        this.$message.error(res.messsage)
      }
    },
    async handlerUpdate () {
      const res = await DepartmentApi.update(this.departmentForm)
      if (res.code === '0') {
        this.$emit('close')
      } else {
        this.$message.error(res.messsage)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.el-dialog {
  .el-select {
    width: 100%;
  }

  .footer {
    text-align: center;
  }
}
</style>
